import type { Ability } from '@vtuber/ThreeSDK';
import type { Caption } from '../types/vtuber';
import type { CaptionData } from '../types/vtuber';

export default () => {
  const line2ScrollTop: number = 25;
  // 字幕
  let caption: Caption = {
    // 是否展示
    show: false,
    // 字幕类名
    className: '',
    // 自动定位
    autoPosition: false
  };
  // 缓存正在播报的内容，用作高亮显示
  const captionData: CaptionData = {
    // 已经播报过的内容
    removedValue: '',
    // 剩余内容
    remainValue: '',
    // 当前播报内容
    nowValue: ''
  };
  let originCaptionData: CaptionData = { ...captionData };

  // 高亮定位
  const highLightPosition = (captionRef: HTMLElement | void) => {
    if (!captionRef) {
      return;
    }
    const highLightDom = captionRef.children[0];
    if (!highLightDom) {
      return;
    }
    const top = (highLightDom as HTMLSpanElement).offsetTop;
    captionRef.scrollTop = top - line2ScrollTop;
  };
  // 字幕设置
  const initCaption = (engine: Ability) => {
    // 关闭原生字幕功能
    engine.caption.changeCaptionStatus(false);
    if (!caption.show) {
      return;
    }
  };

  return {
    caption,
    highLightPosition,
    initCaption,
    captionData,
    originCaptionData
  };
};
